{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues_tag %}
{% block title %}Issues{% endblock title %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<style>
    
    .panel-default{
        margin-top:10px;
    }
    .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    .panel-body{
        padding:0px;
    }
    .title_list{
        border-right:1px solid #dddddd;
    }
    .content{
        border-left:1px solid #dddddd;
        margin-left: -1px;
    }
    

</style>
{% endblock css %}
{% block content %}

<!-- panel -->
<div class="container-fluid" style="margin-top:20px;" >    <!-- container-fluid -->

    <div>
        <div class="input-group" style="width: 300px;">
            <span class="input-group-addon">日期范围</span>
            <input id="rangePicker" type="text" class="form-control">
        </div>
    </div>
    

    <div class="row">
        
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">项目用户统计</h5>
                </div> 
                <div class="panel-body">
                    <div id='projectUser' style="height:300px;"></div>
                    
                </div>
            </div>

        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">优先级统计</h5>
                </div> 
                <div class="panel-body">
                    <div id='priority' style="height:300px;"></div>
                    
                </div>
            </div>
        </div>
    </div>
</div>





{% endblock content %}
{% block js %}
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
<script>
    $(function () {
        initDateRangePicker();
        priority(moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
        projectUser(moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
    });

    function initDateRangePicker() {
        var options = {
            maxDate: moment(),
            alwaysShowCalendars: true,
            showWeekNumbers: true,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '最近7天': [moment().subtract(6, 'days'), moment()],
                '最近30天': [moment().subtract(29, 'days'), moment()],
                '本月': [moment().startOf('month'), moment().endOf('month')]
            },
            locale: {
                format: 'YYYY-MM-DD',
                separator: ' 至 ',
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '开始',
                toLabel: '结束',
                customRangeLabel: '自定义',
                weekLabel: 'W',
                daysOfWeek: ['一', '二', '三', '四', '五', '六', '日'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        };

        $('#rangePicker').daterangepicker(options, function (start, end, label) {
            // 选择了时间之后，函数自动被触发。
            //console.log(start.format('YYYY-MM-DD'),end.add(1, 'days').format('YYYY-MM-DD'));
            priority(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));
            projectUser(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));
        });
    }    

    function priority(start, end) {
        var config = {
            chart: {
                type: 'pie'
            },
            title: {
                text: null
            },
            credits: {
                enabled: false // 关闭版权信息
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: '优先级',
                colorByPoint: true,
                data: []
                /*
                data: [
                    {
                        name:'IE',
                        y: 11.84
                    },
                    {
                        name:'Firefox',
                        y: 10
                    }
                ]
                */
            }]
        };
        $.ajax({
            url: "{% url 'web:priority_chart' project_id=request.tracer.project.id %}",
            type: "GET",
            data: {start: start, end: end},
            dataType: "JSON",
            success: function (res) {
                config.series[0].data = res.data;
                Highcharts.chart('priority', config);

            }
        })
    }
    function projectUser(start, end) {
        var config = {
            chart: {
                type: 'column'
            },
            title: {
                text: null
            },
            credits: {
                enabled: false // 关闭版权信息
            },
            xAxis: {
                categories: ['武沛齐', '万光', '很熟哦']
            },

            yAxis: {
                min: 0,
                title: {
                    text: '问题数量'
                },
                stackLabels: {  // 堆叠数据标签
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'center',
                verticalAlign: 'top'

            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        '总量: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            series: [{
                name: '新建',
                data: [5, 3, 4]
            }, {
                name: '处理中',
                data: [2, 2, 3]
            }, {
                name: '啊啊',
                data: [3, 4, 4]
            }]
        };
        // Highcharts.chart('projectUser', config);
        $.ajax({
            url: "{% url 'web:statistics_projectuser' project_id=request.tracer.project.id %}",
            type: "GET",
            data: {start: start, end: end},
            dataType: "JSON",
            success: function (res) {
                config.xAxis.categories = res.data.categories;
                config.series = res.data.series;
                Highcharts.chart('projectUser', config);

            }
        })
    }
</script>

{% endblock js %}